<template>
  <div style="padding-bottom: 10px">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item prop="taskName">
        <el-input
            v-model="queryParams.taskName"
            placeholder="任务名称"
            clearable
            @keyup.enter.native="handleQuery"
            suffix-icon="search"
            :suffix-icon-click="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="taskStatus">
        <el-select v-model="queryParams.taskStatus" placeholder="认领状态" clearable style="width: 200px">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="isTimeOut">
        <el-select v-model="queryParams.isTimeOut" placeholder="是否超时" clearable style="width: 200px">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="23">
        <el-table v-loading="loading" :data="matterList" @selection-change="handleSelectionChange">
<!--          <el-table-column type="selection" width="55" align="center"/>-->
          <el-table-column min-width="13%" label="任务名称" align="center" prop="taskName"/>
          <el-table-column min-width="15%" label="任务内容" align="center" prop="taskContent"/>
          <el-table-column min-width="6%" label="接收人" align="center" prop="recipientName"/>
          <el-table-column min-width="6%" label="关联人" align="center" prop="associationName"/>
          <el-table-column min-width="7%" label="任务完成期限" align="center" prop="taskCompleteDate"/>
          <el-table-column min-width="5%" prop="taskStatus" label="状态" align="center">
            <template #default="scope">
              <dict-tag :options="task_status" :value="scope.row.taskStatus"/>
            </template>
          </el-table-column>
          <el-table-column min-width="5%" label="操作" align="center" class-name="small-padding fixed-width" width="150">
            <template #default="scope">
              <div style="display: flex;">

                <el-button
                    size="mini"
                    :type="disableClaimButton(scope.row.taskStatus) ? 'info' : 'success'"
                    plain
                    :disabled="disableClaimButton(scope.row.taskStatus)"
                    @click="claim(scope.row)">
                  认领
                </el-button>


                <el-button v-if="scope.row.taskStatus == 2 || scope.row.taskStatus == 6"
                           size="mini"
                           type="primary"

                           :disabled="disableCreateMatterButton(scope.row.taskStatus)"
                           @click="createMatter(scope.row)">
                  事项创建
                </el-button>

                <el-button v-else
                           size="mini"
                           type="danger"
                           @click="viewMatter(scope.row)">
                  查看事项
                </el-button>


              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            v-show="total > 0"
            :current-page.sync="queryParams.pageNum"
            :page-size.sync="queryParams.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            style="width: 97%; margin-top: 10px;"
            :pager-count="5"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {reactive, toRefs, ref, onMounted} from 'vue';
import {listTask, taskClaim} from "@/api/matter/matter";
import {ElInput, ElSelect, ElOption, ElRow, ElCol, ElForm, ElFormItem, ElButton, ElMessageBox} from 'element-plus';


export default {
  name: "taskReception",
  components: {
    ElInput,
    ElSelect,
    ElOption,
    ElRow,
    ElCol,
    ElForm,
    ElFormItem,
    ElButton,
    ElMessageBox,
  },
  setup(_, {emit}) {
    const {proxy} = getCurrentInstance();
    const {task_status} = proxy.useDict('task_status');
    const data = reactive({
      loading: false,
      task_status: task_status,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      matterList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: null, // 关键词
        taskStatus: '', // 状态
        isTimeOut: '', //是否超期
        taskName: '',
        em1: null,
        em2: null,
        em3: null,
        em4: null,
        em5: null,
      },
      options1: [
        {value: '', label: '全部'},
        {value: '2', label: '待认领'},
        {value: '3', label: '进行中'},
      ],
      options2: [
        {value: '', label: '全部'},
        {value: '0', label: '超期'},
        {value: '1', label: '未超期'},
      ],
      form: {},
      rules: {
        matterResponsibleId: [
          {required: true, message: "事项负责人ID不能为空", trigger: "blur"},
        ],
      },
    });

    const getList = () => {
      data.loading = true;
      listTask(data.queryParams).then((response) => {
        data.matterList = response.data.list;
        data.total = response.data.total;
        data.loading = false;
      });
    };

    const handleQuery = () => {
      data.queryParams.pageNum = 1;
      getList();
    };

    const resetQuery = () => {
      Object.assign(data.queryParams, {
        pageNum: 1,
        pageSize: 10,
        keyWord: null, // 关键词
        taskStatus: '', // 状态
        isTimeOut: '', //是否超期
        taskName: ''
      });
      handleQuery();
    };

    const handleSelectionChange = (selection) => {
      data.ids = selection.map((item) => item.matterId);
      data.single = selection.length !== 1;
      data.multiple = !selection.length;
    };

    // 根据任务状态返回认领按钮是否可点击
    const disableClaimButton = (taskStatus) => {
      if (taskStatus == 2) {
        return false; // 待认领状态，认领按钮可点击
      } else if (taskStatus == 6) {
        return true; // 已认领状态，认领按钮不可点击
      } else {
        return true; // 其他状态，认领按钮不可点击
      }
    };

    // 根据任务状态返回事项创建按钮是否可点击
    const disableCreateMatterButton = (taskStatus) => {
      if (taskStatus == 2 || taskStatus == 3) {
        return true; // 待认领状态或进行中状态，事项创建按钮不可点击
      } else {
        return false; // 其他状态，事项创建按钮可点击
      }
    };
    const handleCurrentChange = (currentPage) => {
      data.queryParams.pageNum = currentPage;
      getList();
    };

    const claim = (row) => {

      taskClaim({taskId: row.taskId}).then(res => {
        getList();
        proxy.$modal.msgSuccess("任务认领成功");
      })

    };

    const createMatter = (row) => {
      console.log("事项创建");
      emit('createMatter', row)

    };

    // 查看事项操作
    const viewMatter = (row) => {
      console.log('查看事项操作', row);
      emit('seeMatter', row)
    };


    onMounted(() => {
      getList();
    });

    return {
      ...toRefs(data),
      getList,
      handleQuery,
      resetQuery,
      handleSelectionChange,
      claim,
      createMatter,
      viewMatter,
      disableClaimButton,
      disableCreateMatterButton,
      handleCurrentChange

    };
  },
};
</script>

<style>
</style>
